<template>
<view class="user-order">
    <tabs :active="active" @change="changeShow" :config="{itemWidth: 370}">
        <tab v-for="(item, index) in order" :key="index" :title="item.name" :name="item.type">
			<!-- <ranking-list v-if="item.isShow" :types="item.type" :ref="'order' + item.type"></ranking-list> -->
			<view class="all">
				<view class="list" v-for="(item, index) in lists" :key="index">
					<view class="num" style="font-size: 35rpx;color: #CCCCCC;font-weight: bold;">
						{{index}}
					</view>
					<image :src="item.avatar" mode=""></image>
					<view class="user">
						<view class="name" style="color: #000000;font-weight: bold;font-size: 35rpx;">
							{{item.nickname}}
						</view>
						<view class="label" style="margin-top: 10rpx;">
							{{item.level_text}}
						</view>
					</view>
					<view class="jsa" style="color:#ff2c2c;font-size: 40rpx;font-weight: bold; margin-left: 60rpx;">
						{{item.user_money}}
					</view>
				</view>
			</view>
        </tab>
    </tabs>
	<!-- <float-tab></float-tab> -->
</view>
</template>

<script>

import { rankingType } from '@/utils/type';
import  {rank}  from '@/api/user';

export default {
  data() {
    return {
		lists:[],
      active: rankingType.PROFIT,
      order: [{
        name: '收益排行榜',
        type: rankingType.PROFIT,
        isShow: false
      },
	  {
	    name: '团队排行榜',
	    type: rankingType.TIM,
	    isShow: false
	  }
	  ]
    };
  },

  components: {
  },
  props: {},
  onLoad: function (options) {
    const{order} = this
    let type = options.type || rankingType.PROFIT;
	let index = order.findIndex(item => item.type == type)
    this.changeShow(index);
  },

  onPullDownRefresh: function () {
   const {active, order} = this
   console.log(this.$refs['order' + order[active].type])
   this.$refs['order' + order[active].type][0].reflesh()
  },

  onReachBottom: function () {
	  const {active, order} = this
	console.log(this.$refs['order' + order[active].type])
	this.$refs['order' + order[active].type][0].getOrderListFun()
  },
  methods: {
    changeShow(index) {
		if(index != -1) {
			this.active = index
			this.order[index].isShow = true
		}
		let data={
			type:index
		}
		rank(data).then(res=>{
			console.log(res)
			this.lists=res.data
		})
    },
  }
};
</script>
<style lang="less">
	.all{
		padding: 0 30rpx;
		.list{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			image{
				margin-left: 30rpx;
				width: 150rpx;
				height: 150rpx;
			}
			.user{
				margin-left: 30rpx;
				text-align: center;
				.label{
					text-align: center;
					width: 140rpx;
					height: 55rpx;
					border-radius: 30rpx;
					background: linear-gradient(#f75303, #ffda52);
					color: #FFFFFF;
					line-height: 55rpx;
				}
			}
		}
	}
</style>